<template>
  <div style="margin-top: 10px" class="app-contain" v-loading="loading">
    <el-row :gutter="50">
      <el-col :span="8">
        <el-card style="width: 100%; padding: 10px">
          <el-form
            label-width="90px"
            :rules="rules"
            :model="generateExamParam"
            ref="generateExamForm"
          >
            <el-form-item label="学科: " prop="subjectId">
              <el-select
                v-model="generateExamParam.subjectId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in subjects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单选题：">
              <el-slider
                :step="1"
                show-stops
                :max="20"
                v-model="generateExamParam.singleChoice"
              >
              </el-slider>
            </el-form-item>
            <el-form-item label="多选题：">
              <el-slider
                :step="1"
                show-stops
                :max="20"
                v-model="generateExamParam.multipleChoice"
              >
              </el-slider>
            </el-form-item>
            <el-form-item label="判断题：">
              <el-slider
                :step="1"
                show-stops
                :max="20"
                v-model="generateExamParam.judgment"
              >
              </el-slider>
            </el-form-item>
            <el-form-item label="填空题：">
              <el-slider
                :step="1"
                show-stops
                :max="20"
                v-model="generateExamParam.gapFilling"
              >
              </el-slider>
            </el-form-item>
            <el-form-item label="简答题：">
              <el-slider
                :step="1"
                show-stops
                :max="10"
                v-model="generateExamParam.shortAnswer"
              >
              </el-slider>
            </el-form-item>
            <el-form-item label="难度：">
              <el-rate
                style="line-height: 2.3 !important"
                v-model="generateExamParam.difficult"
                show-text
                :texts="difficultArray"
              >
              </el-rate>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">生成试卷</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <el-col :span="16">
        <div
          style="
            border-bottom: 1px solid rgb(86, 172, 253);
            width: 100%;
            height: 50px;
          "
        >
          <el-form
            label-width="60px"
            ref="searchForm"
            :model="queryParam"
            inline
          >
            <el-row>
              <el-col :span="10">
                <el-form-item label="学科: " prop="subjectId">
                  <el-select
                    v-model="queryParam.subjectId"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in subjects"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="难度：" prop="difficult">
                  <el-rate
                    style="line-height: 2.3 !important"
                    v-model="queryParam.difficult"
                    show-text
                    :texts="difficultArray"
                  >
                  </el-rate>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" @click="search" size="small"
                    >查询</el-button
                  >
                  <el-button
                    type="primary"
                    @click="reset('searchForm')"
                    size="small"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-card style="width: 100%; margin-top: 15px">
          <el-table
            v-loading="listLoading"
            highlight-current-row
            :data="tableData"
            fit
            style="width: 100%; min-height: 460px"
            @sort-change="changeTableSort"
          >
            <el-table-column
              label="试卷名称"
              prop="name"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="学科名称" show-overflow-tooltip width="130">
              <template slot-scope="{ row }">
                {{ subjectFormatter(row.subjectId) }}
              </template>
            </el-table-column>
            <el-table-column label="试卷总分"  prop="score" width="80">
            </el-table-column>
            <el-table-column
              label="难度"
              prop="difficult"
              :sortable="'custom'"
              width="100"
            ></el-table-column>

            <el-table-column
              label="创建时间"
              prop="createTime"
              width="170"
            ></el-table-column>
            <el-table-column width="120">
              <template slot-scope="{ row }">
                <router-link
                  target="_self"
                  :to="{ path: '/do', query: { id: row.id } }"
                >
                  <el-button type="text" size="small">开始答题</el-button>
                </router-link>
              </template>
            </el-table-column>
            <template slot="empty">
              <div class="no-data-layout-index">
                <img src="@/assets/emptyIndex.png" />
                <div class="none-data-label">暂无内容</div>
              </div>
            </template>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :background="false"
            :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize"
            @pagination="search"
            style="margin-top: 20px"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
import Pagination from "@/components/Pagination";
import examPaperAnswerApi from "@/api/examPaperAnswer";
import examPaperApi from "@/api/examPaper";
import subjectApi from "@/api/subject";
import { scrollTo } from "@/utils/scroll-to";
export default {
  components: { Pagination },
  data() {
    return {
      generateExamParam: {
        subjectId: null,
        singleChoice: 5,
        multipleChoice: 5,
        judgment: 5,
        gapFilling: 5,
        shortAnswer: 3,
        difficult: 3,
      },
      queryParam: {
        pageIndex: 1,
        pageSize: 10,
        sort: "create_time desc",
        difficult: -1,
        subjectId: null,
      },
      loading: false,
      listLoading: false,
      tableData: [],
      total: 0,
      selectItem: {
        systemScore: "0",
        userScore: "0",
        doTime: "0",
        paperScore: "0",
        questionCorrect: 0,
        questionCount: 0,
      },
      rules: {
        subjectId: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.search();
    let _this = this;
    this.initSubject();
    scrollTo(0, 800);
  },
  methods: {
    changeTableSort(column) {
      //获取字段名称和排序类型
      var fieldName = column.prop;
      var sortingType = column.order;
      this.queryParam.pageIndex = 1;
      let x = "";
      if (fieldName == "difficult") {
        x = "difficult";
      } else if (fieldName == "createTime") {
        x = "create_time";
      }
      if (sortingType == "descending") {
        this.queryParam.sort = x + " desc";
      } else {
        this.queryParam.sort = x + " asc";
      }
      this.search();
    },
    submitForm() {
      this.$refs.generateExamForm.validate((valid) => {
        if (!valid) {
          this.$message({
            message: "请选择学科",
            type: "warning",
          });
          return false;
        }
        this.loading = true;
        examPaperApi
          .generate(this.generateExamParam)
          .then((data) => {
            this.loading = false;
            if (data.code == 1) {
              this.$message({
                message: '生成试卷成功, 试卷名为:'+data.response,
                type: "success",
              });
              this.search();
            } else {
              this.$message.error(data.message);
            }
          })
          .catch((e) => {
            this.loading = false;
          });
      });
    },
    search() {
      this.$nextTick(() => {
        this.listLoading = true;
        let _this = this;
        examPaperApi
          .trainingPageList(this.queryParam)
          .then((data) => {
            const re = data.response;
            _this.tableData = re.list;
            _this.total = re.total;
            _this.queryParam.pageIndex = re.pageNum;
            _this.listLoading = false;
          })
          .catch((e) => {
            _this.listLoading = false;
          });
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.queryParam.pageIndex = 1;
      this.search();
    },
    itemSelect(row, column, event) {
      this.selectItem = row;
    },
    statusTagFormatter(status) {
      return this.enumFormat(this.statusTag, status);
    },
    statusTextFormatter(status) {
      return this.enumFormat(this.statusEnum, status);
    },
    paperTypeEnumFormatter(status) {
      return this.enumFormat(this.paperTypeEnum, status);
    },

    subjectFormatter(status) {
      return this.subjectEnumFormat(this.subjects, status);
    },
    ...mapActions("exam", { initSubject: "initSubject" }),
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapGetters("exam", ["subjectEnumFormat"]),
    ...mapState("enumItem", {
      statusEnum: (state) => state.exam.examPaperAnswer.statusEnum,
      statusTag: (state) => state.exam.examPaperAnswer.statusTag,
      paperTypeEnum: (state) => state.exam.examPaper.paperTypeEnum,
      difficultArray: (state) => state.exam.question.difficult,
    }),
    ...mapState("exam", {
      subjects: (state) => state.subjects,
    }),
  },
};
</script>

<style lang="scss" scoped>
.no-data-layout-index {
  width: 100%;
  text-align: center;
  padding-top: 130px;
}
.no-data-layout-index .none-data-label {
  font-size: 14px;
  color: #9b9b9b;
}
.el-form-item {
  margin-bottom: 15px;
}
</style>
